<template>
  <div class="new-activity-page">

    <el-breadcrumb class="breadcrumb page-title" separator="/">
      <span @click="goback" class="el-breadcrumb__inner is-link">Restaurant activity</span>
      <span>/</span>
      <span role="link" class="el-breadcrumb__inner">new</span>
    </el-breadcrumb>

    <div class="container-padding">

      <el-form label-position="top" :rules="activityRules" :model="Form" ref="ruleForm" size="mini">

        <el-form-item label="Status" style="width: 200px;" prop="statusId">
          <el-select style="width: 200px" v-model="Form.statusId" :value="Form.statusId" placeholder="">
            <el-option v-for="item in statusOption" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="Activity Time" style="width: 200px;" prop="date">
          <el-date-picker
            style="width:200px;"
            v-model="Form.date"
            type="date"
            placeholder="">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="Activity Type" style="width: 200px;" prop="activityTypeId">
          <el-select style="width: 200px" v-model="Form.activityTypeId" :value="Form.activityTypeId" placeholder="">
            <el-option v-for="i in activityTypeOption" :key="i.value" :label="i.text" :value="i.value"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="Objective" prop="type">
          <div>
            <el-checkbox-group v-model="Form.type">
              <el-checkbox label="1" name="type" style="margin-right: 30px">Introduction</el-checkbox>
              <el-checkbox label="2" name="type">Make appointment</el-checkbox>
              <el-checkbox label="3" name="type">Software installation</el-checkbox>
              <el-checkbox label="4" name="type">Training</el-checkbox>
              <el-checkbox label="5" name="type">Software troubleshooting</el-checkbox>
              <el-checkbox label="6" name="type">Complaint</el-checkbox>
              <el-checkbox label="8" name="type">Data update</el-checkbox>
              <div class="other" style="width: 300px">
                <el-checkbox label="7" name="type">Others</el-checkbox>
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder=""
                  v-model="Form.otherObjectives">
                </el-input>
              </div>

            </el-checkbox-group>
          </div>
        </el-form-item>


        <el-form-item label="Result" style="width: 300px;">
          <el-input
            type="textarea"
            :rows="4"
            placeholder=""
            v-model="Form.result">
          </el-input>
        </el-form-item>


        <el-form-item style="margin-top: 37px;margin-left: 30px;">
          <el-button @click="save">Save</el-button>
          <el-button type="warning" @click="goback">Cancel</el-button>
        </el-form-item>

      </el-form>

    </div>
  </div>
</template>

<script>

  import {newActivity} from '../../api/zxy_api.js'
  import qs from 'qs';

  export default {
    name: 'newAactivity',
    data() {
      return {
        Form: {
          statusId: '',
          date: '',
          activityTypeId: '',
          type: [],
          result: '',
          otherObjectives: '',
          restaurantId: ''
        },
        statusOption: [
          {
            value: 1,
            label: "Active"
          },
          {
            value: 2,
            label: "Deleted"
          }
        ],
        activityTypeOption: [
          {
            value: 1,
            text: "Call"
          },
          {
            value: 2,
            text: "Visit"
          },
          {
            value: 3,
            text: "Received call"
          },
        ],
        activityRules: {
          statusId: [
            {type: 'number', required: true, message: 'Please Select', trigger: 'change'}
          ],
          activityTypeId: [
            {type: 'number', required: true, message: 'Please Select', trigger: 'change'}
          ],
          type: [
            {type: 'array', required: true, message: 'Please Select', trigger: 'change'}
          ],
          date: [
            {type: 'date', required: true, message: 'Please Select', trigger: 'change'}
          ],
        },
      }
    },
    methods: {
      goback() {
        // 跳转到饭店详情页面
        this.$router.push({path: '/activity', query: {id: this.Form.restaurantId}})
      },
      dateFormat(value) {
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        var t = Y + '-' + m + '-' + d
        return t
      },
      save() {
        this.$refs['ruleForm'].validate((valid) => {

          if (valid) {

            let Form = {
              restaurantId: this.Form.restaurantId,
              status: this.Form.statusId,
              activityTime: this.Form.date ? this.dateFormat(this.Form.date) : '',
              activityType: this.Form.activityTypeId,
              objectives: this.Form.type ? this.Form.type.join(',') : '',
              result: this.Form.result || '',
            };

            if (this.Form.type) {
              this.Form.type.forEach((value, i, arr) => {
                if (value == 7) {
                  Form.otherObjectives = this.Form.otherObjectives;
                }
              })
            }

            Form = qs.stringify(Form)

            newActivity(Form).then((res) => {
              // 表单重置
              this.$refs['ruleForm'].resetFields();

              // 跳转到饭店详情页面
              this.$router.push({path: '/activity', query: {id: this.Form.restaurantId}})

            }).catch((e) => {
            })
          } else {
            return false;
          }
        });
      },
    },
    mounted() {
      if (this.$route.query.restaurantId) {
        this.Form.restaurantId = this.$route.query.restaurantId || '';
      }
    }
  }
</script>


<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6 !important;
    font-size: 20px !important;
  }

  .breadcrumb {
    margin-bottom: 20px;
  }

  .container-padding {
    padding: 0 40px;
  }

  .new-activity-page .el-checkbox + .el-checkbox {
    margin-left: 0 !important;
    margin-right: 30px !important;
  }
</style>
